<template>
  <div>
    <div>
      <!-- 注册表单 -->
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" show-password clearable></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="newPassword">
          <el-input v-model="form.newPassword" show-password clearable></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="fullName">
          <el-input v-model="form.fullName"></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <el-upload class="avatar-uploader" action="http://localhost:5000/api/User/UploadFile" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="form.avatar" :src="'http://localhost:5000' + form.avatar" class="avatar"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注">
          <!-- 使用富文本编辑器 -->
          <div style="border: 1px solid #ccc">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editor"
              :defaultConfig="toolbarConfig"
              :mode="mode"
            />
            <Editor
              style="height: 200px; overflow-y: hidden"
              v-model="form.remark"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="onCreated"
            />
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { RegisterJS } from "../../api/admin.js";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
  //注册组件
  components: { Editor, Toolbar },
  data() {
    return {
      dialogTableVisible: false, //表格
      dialogFormVisible: false,  //表单
      //富文本编辑器
      editor: null,
      html: "<p>hello</p>",
      toolbarConfig: {},
      editorConfig: { placeholder: "请输入内容..." },
      mode: "default", // or 'simple'
      //参数
      form: {
        userName: "",
        password: "",
        newPassword: "",
        fullName: "",
        email: "",
        avatar: "",
        remark: "",
      },
      //表单验证
      rules: {
        userName: [{ required: true, message: "请输入用户名", trigger: "blur" },],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        newPassword: [
          { required: true, message: "请再次输入新密码", trigger: "blur" },
          { validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请再次输入新密码"));
              } 
              else if (value !== this.form.password) {
                callback(new Error("两次输入密码不一致"));
              } 
              else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        fullName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        email: [
          { required: true, message: "请填写邮箱", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"],},
        ],
      },
    };
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
      this.html = "<p>模拟 Ajax 异步设置内容 HTML</p>";
    }, 1500);
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    //图片上传
    handleAvatarSuccess(res) {
        this.form.avatar = res;
    },
    //头像格式大小
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //【注册】
    RegInfo(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          RegisterJS(this.form).then((res) => {
            if (res.data.result == 200) {
              this.$message({ type: "success", message: res.data.message });
              this.dialogFormVisible = false;
              return;
            } 
            else {
              this.$message({ type: "error", message: res.data.message });
              return;
            }
          });
        }
        else {
          return false;
        }
      });
    },
  },
  created() {},
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>  
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
